<!DOCTYPE html>
<html>
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-49RD5H9MR3"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-49RD5H9MR3');
    </script>
    <!-- Basic Page Info -->
    <meta charset="UTF-8" />
    <!-- Theme Color -->
    <meta name="theme-color" content="#FFF" />
    <!-- Title -->
    <title>Fonoster</title>
    <!-- Site favicon -->
    <link rel="shortcut icon" href="./site-assets/images/favicon.ico" />
    <!-- Mobile Specific Metas -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />

    <!-- CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="site-assets/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="site-assets/css/swiper-bundle.min.css"
    />

    <link rel="stylesheet" type="text/css" href="site-assets/css/prism.css" />
    <link rel="stylesheet" type="text/css" href="site-assets/css/style.css" />
    <link rel="stylesheet" type="text/css" href="site-assets/css/media.css" />
  </head>

  <body>
    <!-- header-starts -->
    <div class="header-wrap">
      <header>
        <div class="container">
          <div class="content">
            <div class="left">
              <div class="logo">
                <a
                  href="https://fonoster.com/"
                  class="focus-outline"
                  target="_blank"
                >
                  <img
                    src="site-assets/images/icons/logo.svg"
                    alt="logo"
                    class="svg"
                  />
                </a>
              </div>
            </div>

            <div class="right">
              <div class="nav-links">
                <ul class="links">
                  <li>
                    <a
                      href="https://docs.fonoster.com/"
                      target="_blank"
                      class="focus-outline"
                    >
                      <div class="icon">
                        <img
                          src="site-assets/images/icons/new-tab.svg"
                          class="svg"
                        />
                      </div>
                      Documentation</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://discord.gg/4QWgSz4hTC"
                      target="_blank"
                      class="focus-outline"
                    >
                      <div class="icon">
                        <img
                          src="site-assets/images/icons/new-tab.svg"
                          class="svg"
                        />
                      </div>
                      community</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://discord.gg/4QWgSz4hTC"
                      target="_blank"
                      class="focus-outline"
                    >
                      <div class="icon">
                        <img
                          src="site-assets/images/icons/new-tab.svg"
                          class="svg"
                        />
                      </div>
                      Support</a
                    >
                  </li>
                </ul>
              </div>
              <div class="btn-wrap header-btn">
                <a
                  href="https://form.typeform.com/to/sDv75mFr"
                  target="_blank"
                  class="btn-link"
                  >Log in</a
                >
                <a
                  href="https://form.typeform.com/to/sDv75mFr"
                  target="_blank"
                  class="btn btn-primary"
                  >Get Started</a
                >
              </div>
            </div>

            <div class="menu-btn">
              <button
                class="menu focus-outline"
                onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))"
                aria-label="Main Menu"
              >
                <svg width="25" height="25" viewBox="0 0 100 100">
                  <path
                    class="line line1"
                    d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
                  />
                  <path class="line line2" d="M 20,50 H 80" />
                  <path
                    class="line line3"
                    d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </header>
    </div>
    <!-- header-ends -->

    <!-- banner-starts -->
    <div class="banner-wrap">
      <div class="img-wrap-mobile d-md-none d-block">
        <img
          src="site-assets/images/banner-bg-mobile.png"
          alt="banner-bg"
          width="393"
          height="325"
        />
      </div>
      <div class="container">
        <div class="content">
          <div class="box">
            <div class="upper">
              <h1 class="h1 title">The open source alternative to Twilio</h1>
              <p class="desc">
                Engage with your customers with voice or messaging with a
                single, easy-to-use platform.
              </p>
            </div>
            <div class="btn-wrap">
              <a href="https://form.typeform.com/to/sDv75mFr" class="btn btn-primary">Get Started</a>
              <a href="https://docs.fonoster.com/" class="btn-arrow">
                Documentation
                <div class="icon">
                  <img
                    src="site-assets/images/icons/btn-arrow.svg"
                    alt="btn-arrow"
                    class="svg"
                  />
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner-ends -->

    <!-- about-us-starts -->
    <div class="about-us-wrap">
      <div class="container">
        <div class="content">
          <div class="left">
            <p class="accent">about us 👋️</p>
            <h2 class="h1 title">
              Build voice applications for your business, today.
            </h2>
            <div class="btn-wrap">
              <a href="https://form.typeform.com/to/sDv75mFr" class="btn btn-primary">Get Started</a>
            </div>
          </div>

          <div class="right">
            <ul class="feature-list">
              <li>
                <div class="feature-icon">
                  <img
                    src="site-assets/images/icons/feature-icon-one.svg"
                    alt="feature-icon"
                    class="svg"
                  />
                </div>
                <div class="inner">
                  <h3 class="h3 title">Applications</h3>
                  <p class="desc">
                    Voice Applications are first-class citizens with supports
                    for verbs like Play, Say, Gather, etc.
                  </p>
                  <div class="btn-wrap">
                    <a href="https://docs.fonoster.com/" class="btn-arrow btn-alt"
                      >Learn More
                      <div class="icon">
                        <img
                          src="site-assets/images/icons/btn-arrow.svg"
                          alt="btn-arrow"
                          class="svg"
                        /></div
                    ></a>
                  </div>
                </div>
              </li>

              <li>
                <div class="feature-icon">
                  <img
                    src="site-assets/images/icons/feature-icon-two.svg"
                    alt="feature-icon"
                    class="svg"
                  />
                </div>
                <div class="inner">
                  <h3 class="h3 title">Authentication</h3>
                  <p class="desc">
                    Keep your business safe with project-level authentication
                    based in OAuth2 and JWT tokens.
                  </p>
                  <div class="btn-wrap">
                    <a href="https://docs.fonoster.com/concepts/identity-and-tokens" class="btn-arrow btn-alt"
                      >Learn More
                      <div class="icon">
                        <img
                          src="site-assets/images/icons/btn-arrow.svg"
                          alt="btn-arrow"
                          class="svg"
                        /></div
                    ></a>
                  </div>
                </div>
              </li>

              <li>
                <div class="feature-icon">
                  <img
                    src="site-assets/images/icons/feature-icon-one.svg"
                    alt="feature-icon"
                    class="svg"
                  />
                </div>
                <div class="inner">
                  <h3 class="h3 title">Storage</h3>
                  <p class="desc">
                    Store, organize, and serve your sounds on S3 buckets and
                    user them later for analysis.
                  </p>
                  <div class="btn-wrap">
                    <a href="https://docs.fonoster.com/" class="btn-arrow btn-alt"
                      >Learn More
                      <div class="icon">
                        <img
                          src="site-assets/images/icons/btn-arrow.svg"
                          alt="btn-arrow"
                          class="svg"
                        /></div
                    ></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="install-slider-wrap">
          <div class="install-slider swiper-slider">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="card">
                  <div class="inner">
                    <p class="title">Install from NPM or CDN</p>
                    <p class="desc">
                      Use the SDKs in the Browser or NodeJS application
                    </p>
                    <div class="btn-wrap">
                      <a href="https://docs.fonoster.com/concepts/sdks" class="btn-arrow"
                        >Learn More
                        <div class="icon">
                          <img
                            src="site-assets/images/icons/btn-arrow.svg"
                            alt="btn-arrow"
                          /></div
                      ></a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="card">
                  <div class="inner">
                    <p class="title">CLI</p>
                    <p class="desc">
                      User the command-line tool to rapidly create and deploy
                      your applications.
                    </p>
                    <div class="btn-wrap">
                      <a href="https://docs.fonoster.com/" class="btn-arrow"
                        >Learn More
                        <div class="icon">
                          <img
                            src="site-assets/images/icons/btn-arrow.svg"
                            alt="btn-arrow"
                          /></div
                      ></a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="card">
                  <div class="inner">
                    <p class="title">Speech APIs</p>
                    <p class="desc">
                      Unlock Text-to-Speech and Automatic Speech Recognition 
                      potential in your apps.
                    </p>
                    <div class="btn-wrap">
                      <a href="https://docs.fonoster.com/" class="btn-arrow"
                        >Learn More
                        <div class="icon">
                          <img
                            src="site-assets/images/icons/btn-arrow.svg"
                            alt="btn-arrow"
                          /></div
                      ></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- about-us-ends -->

    <!-- capabilities-sec-starts -->
    <div id="capabilities" class="capabilities-sec-wrap">
      <div class="container">
        <div class="content">
          <div class="left">
            <p class="accent">capabilities 🛠️</p>
            <h2 class="h2 title">
              The SDKs and tooling to help build your apps, faster.
            </h2>
            <p class="desc large">
              Create smart voice applications that meets your business needs
              without the clutter of unneeded features or historically
              burdensome customixations.
            </p>
          </div>
          <div class="right">
            <div class="code-block-wrap">
              <input
                id="code-block-check"
                type="checkbox"
                class="code-block-check"
              />
              <label for="code-block-check" class="code-block-label">
                <span class="label-1">Voice App</span>
                <span class="label-2">CallManager</span>
              </label>
              <div class="code-block">
                <div class="code-block-area">
                  <div class="code-block-item">
                    <pre><code class="language-js line-numbers">const VoiceServer = require("@fonoster/voice").default;

new VoiceServer().listen(async (req, voice) => {
  const { ingressNumber, appRef } = req;

  console.log(`Ingress Number: ${ingressNumber}`);
  console.log(`App Reference: ${appRef}`);

  await voice.answer();
  await voice.say("Hello and goodbye!");
  await voice.hangup();
});

// Your app will live at tcp://127.0.0.1:50061 
// and you can easily publish it to the Internet with:
// ngrok tcp 50061
  </code>
  
                    </pre>
                  </div>
                  <div class="code-block-item">
                    <pre><code class="language-js line-numbers">const { Client, Calls } = require("@fonoster/sdk");

const client = Client({ 
  accessKeyId: "WO00000000000000000000000000000000" 
});

client.loginWithApiKey("your-api-key", "your-api-secret")
  .then(async () => {
    const response = await new Calls(client).createCall({
      from: "+18287854037",
      to: "+17853178070",
      appRef: "3e61ecb7-a1b6-4a93-84c3-4f1979165bca"
    });
    console.log(response); // successful response
  }).catch(console.error);
                      
                        </code>
                                          </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- capabilities-sec-ends -->

    <!-- community-sec-starts -->
    <div class="community-sec-wrap">
      <div class="content">
        <div class="left">
          <div class="img-box">
            <div class="inner">
              <img
                src="site-assets/images/community-sec-img.png"
                alt="community-sec-img"
              />
            </div>

            <div class="tweet-img">
              <!-- <img src="site-assets/images/twitter-feed.png" alt="twitter-feed" /> -->
              <blockquote class="twitter-tweet">
                <p lang="en" dir="ltr">
                  Thank you!! <br /><br />We now have over 300 members in our
                  Discord community! <br /><br />From Open Source enthusiasts to
                  telephony experts, we thank you for making this possible
                  🎉👏💚
                  <a href="https://t.co/XjyOWgSncE"
                    >pic.twitter.com/XjyOWgSncE</a
                  >
                </p>
                &mdash; Fonoster (@fonoster)
                <a
                  href="https://twitter.com/fonoster/status/1653460175078973440?ref_src=twsrc%5Etfw"
                  >May 2, 2023</a
                >
              </blockquote>
              <script
                async
                src="https://platform.twitter.com/widgets.js"
                charset="utf-8"
              ></script>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title-section">
            <p class="accent">community 🥳</p>
            <h2 class="h2 title">
              Join our amazing community of contributors.
            </h2>
            <p class="large desc">
              Supported by a growing community of advocates, contributors, and
              heroes.
            </p>

            <ul class="inner-social-icons">
              <li>
                <a href="https://twitter.com/fonoster" class="btn btn-primary">
                  <img
                    src="site-assets/images/icons/x-twitter.svg"
                    alt="twitter"
                    class="svg"
                  />
                </a>
              </li>

              <li>
                <a href="https://discord.gg/4QWgSz4hTC" class="btn btn-primary">
                  <img
                    src="site-assets/images/icons/discord.svg"
                    alt="discord"
                    class="svg"
                  />
                </a>
              </li>

              <li>
                <a href="https://www.reddit.com/search/?q=fonoster" class="btn btn-primary">
                  <img
                    src="site-assets/images/icons/reddit.svg"
                    alt="reddit"
                    class="svg"
                  />
                </a>
              </li>

              <li>
                <a href="https://github.com/fonoster/fonoster" class="btn btn-primary">
                  <img
                    src="site-assets/images/icons/github-stars.svg"
                    alt="github"
                    class="svg"
                  />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- community-sec-ends -->

    <!-- pattern-bg-starts -->
    <div id="pricing" class="pattern-bg-wrap">
      <!-- pricing-sec-starts -->
      <div class="pricing-sec-wrap">
        <div class="container">
          <div class="content">
            <div class="title-section">
              <p class="accent">pricing 💸</p>
              <h2 class="h2 title">Simple, straight-forward pricing.</h2>
            </div>

            <div class="pricing-slider-wrap">
              <div class="pricing-slider swiper-slider">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="card">
                      <p class="plan-name accent">Free</p>
                      <div class="plan-price">
                        <img
                          src="site-assets/images/plan-price-one.svg"
                          alt="plan-price-one"
                          class="svg"
                        />
                      </div>
                      <p class="desc">
                        Rate-limited plan for quickly and easily learning and
                        standing up a prototype app.
                      </p>
                      <ul class="listing">
                        <li>1 Workspace</li>
                        <li>1 Domain</li>
                        <li>30 mins/mo</li>
                        <li>1GB Storage</li>
                        <li>1-week log retention</li>
                        <li>Community support</li>
                      </ul>

                      <div class="btn-wrap">
                        <a href="https://form.typeform.com/to/sDv75mFr" class="btn btn-primary btn-alt">Sign up</a>
                      </div>
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="card">
                      <p class="plan-name accent">Pro</p>
                      <div class="plan-price">
                        <img
                          src="site-assets/images/plan-price-two.svg"
                          alt="plan-price-one"
                          class="svg"
                        />
                      </div>
                      <p class="desc">
                        Perfect for small and medium businesses with
                        applications going into production.
                      </p>
                      <ul class="listing">
                        <li>10GB Storage</li>
                        <li>Unlimited Workspaces</li>
                        <li>Unlimited Domains</li>
                        <li>520 mins/mo free then pay-as-you-go</li>
                        <li>30-day log retention</li>
                        <li>Email support</li>
                      </ul>

                      <div class="btn-wrap">
                        <a href="https://form.typeform.com/to/sDv75mFr" class="btn btn-primary btn-alt">Sign up</a>
                      </div>
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="card">
                      <p class="plan-name accent">advanced</p>
                      <div class="plan-price">
                        <img
                          src="site-assets/images/plan-price-three.svg"
                          alt="plan-price-one"
                          class="svg"
                        />
                      </div>
                      <p class="desc">
                        The highest level of security, regulatory compliance,
                        performance, and scalability.
                      </p>
                      <ul class="listing">
                        <li>Technical support with SLAs</li>
                        <li>Volume commitment pricing</li>
                        <li>Technical onboarding</li>
                        <li>Single Sign-On (Coming Soon)</li>
                        <li>Customer Success Manager</li>
                      </ul>

                      <div class="btn-wrap">
                        <a href="https://form.typeform.com/to/DVAwugzh" class="btn btn-primary btn-alt"
                          >Contact Us</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- pricing-sec-ends -->

      <!-- testimonials-sec-starts -->
      <div class="testimonials-sec-wrap">
        <div class="container">
          <div class="content">
            <div class="title-section">
              <p class="accent">testimonials 🥰</p>
              <h2 class="h2 title">What our people are saying about us.</h2>
            </div>
          </div>
        </div>

        <div class="testimonials-slider-wrap">
          <div class="testimonials-slider swiper-slider">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="card">
                  <h3 class="h3 title">“The one and only cloud-first SIP server!”</h3>
                  <div class="inner">
                    <div class="icon">
                      <img src="site-assets/images/icons/quote.svg" alt="quote" />
                    </div>
                    <div class="content">
                      <p class="text">
                        I came across Routr,
                        which seems to be the one and only cloud-first Kubernetes-ready SIP server 
                        on the planet!
                      </p>
                      <p class="accent author">Jessie Wadman, Camanio AB</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="card">
                  <h3 class="h3 title">“Awesome community!”</h3>
                  <div class="inner">
                    <div class="icon">
                      <img src="site-assets/images/icons/quote.svg" alt="quote" />
                    </div>
                    <div class="content">
                      <p class="text">
                        I really love this community and I will like to be a contributor.
                        I am currently working on some use cases with Fonoster.
                      </p>
                      <p class="accent author">AlijiEmmanuel-dev, GitHub Discussions</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="card">
                  <h3 class="h3 title">“Rock on!”</h3>
                  <div class="inner">
                    <div class="icon">
                      <img src="site-assets/images/icons/quote.svg" alt="quote" />
                    </div>
                    <div class="content">
                      <p class="text">
                        Heya pedro! just came across this project in the last hour
                        but love everything about it on first pass
                      </p>
                      <p class="accent author">beckerchase, GitHub Discussions</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- testimonials-sec-ends -->
    </div>
    <!-- pattern-bg-ends -->

    <!-- cta-sec-starts -->
    <div class="cta-sec-wrap">
      <div class="img-wrap">
        <img
          src="site-assets/images/cta-img-tab.png"
          alt="cta-img-tab"
          width="1024"
          height="530"
        />
      </div>

      <div class="img-wrap-mobile">
        <img src="site-assets/images/cta-img-mobile.png" alt="cta-img-tab" />
      </div>
      <div class="container">
        <div class="content">
          <h2 class="h2 title">
            Ready to engage your clients better and faster?
          </h2>
          <p class="large desc">Try us out and start building for free.</p>
          <div class="btn-wrap">
            <a href="https://form.typeform.com/to/sDv75mFr" class="btn btn-primary">Get Started</a>
          </div>
        </div>
      </div>
    </div>
    <!-- cta-sec-ends -->

    <!-- faq-sec-starts -->
    <div class="faq-sec-wrap">
      <div class="container">
        <div class="content">
          <p class="accent">FAQs 🤔</p>
          <h2 class="h2 title">Questions? We’ve got answers.</h2>
        </div>

        <ul class="listing">
          <li>
            <div class="left">Is the self-hosted version free?</div>
            <div class="right">
              Yes, you can self-host it and use your
              <span
                ><a href="https://docs.fonoster.com/self-hosting" class="btn-link btn-alt"
                  >Community Edition</a
                ></span
              >
              for free.
            </div>
          </li>

          <li>
            <div class="left">How long will the free plan remain free?</div>
            <div class="right">We're exploring ways to keep the free plan forever. The open-source version will always be available for self-hosting.</div>
          </li>

          <li>
            <div class="left">
              Do you offer special programs for government and public sector
              customers?
            </div>
            <div class="right">
              Yes we do. Please
              <span><a href="https://form.typeform.com/to/DVAwugzh" class="btn-link btn-alt">get in touch</a></span>
              with us to learn more.
            </div>
          </li>

          <li>
            <div class="left">
              Do you offer special programs for non-profit organizations, open
              source projects, or educational institutions?
            </div>
            <div class="right">
              Yes, we offer special rates to organizations that do good things
              worldwide. If you’d like to apply for a concession, please
              <span><a href="https://form.typeform.com/to/DVAwugzh" class="btn-link btn-alt">contact us</a></span
              >, and we’ll be glad to get to know your work.
            </div>
          </li>

          <li>
            <div class="left">How do I report issues and get support?</div>
            <div class="right">
              Users in the free plan can raise issues in the
              <span
                ><a href="https://github.com/fonoster/fonoster/issues" class="btn-link btn-alt">issue tracker</a></span
              >
              or ask questions among
              <span><a href="https://github.com/fonoster" class="btn-link btn-alt">GitHub</a></span>
              discussions. You can also check our
              <span><a href="https://discord.gg/4QWgSz4hTC" class="btn-link btn-alt">support page</a></span>
              for additional support options.
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- faq-sec-ends -->

    <!-- footer-starts -->
    <footer class="footer-wrap">
      <div class="container">
        <div class="content">
          <ul class="listing">
            <li>
              <p class="footer-title accent">product</p>
              <ul class="footer-links">
                <!-- <li>
                  <a href="#" class="btn-link btn-alt">Marketplace</a>
                </li> -->

                <li>
                  <a href="#capabilities" class="btn-link btn-alt">VOIP Net</a>
                </li>

                <li>
                  <a href="#capabilities" class="btn-link btn-alt">Voice Applications</a>
                </li>

                <li>
                  <a href="#pricing" class="btn-link btn-alt">Pricing</a>
                </li>
              </ul>
            </li>

            <li>
              <p class="footer-title accent">company</p>
              <ul class="footer-links">
                <li>
                  <a href="https://dev.to/psanders" class="btn-link btn-alt">Blog</a>
                </li>

                <li>
                  <a href="https://dev.to/search?q=fonoster" class="btn-link btn-alt">DEV</a>
                </li>
              </ul>
            </li>

            <li>
              <p class="footer-title accent">developers</p>
              <ul class="footer-links">
                <li>
                  <a href="https://docs.fonoster.com/" class="btn-link btn-alt">Documentation</a>
                </li>

                <li>
                  <a href="https://docs.fonoster.com/" class="btn-link btn-alt">API Reference</a>
                </li>

                <li>
                  <a href="https://docs.fonoster.com/guides" class="btn-link btn-alt">Guides</a>
                </li>
              </ul>
            </li>

            <li>
              <p class="footer-title accent">resources</p>
              <ul class="footer-links">
                <li>
                  <a href="https://discord.gg/4QWgSz4hTC" class="btn-link btn-alt">Support</a>
                </li>

                <li>
                  <a href="#" class="btn-link btn-alt">System Status</a>
                </li>
              </ul>
            </li>

            <li>
              <p class="footer-title accent">community</p>
              <ul class="social-icons">
                <li>
                  <a href="https://twitter.com/fonoster">
                    <img
                      src="site-assets/images/icons/x-twitter.svg"
                      alt="twitter"
                      class="svg"
                    />
                  </a>
                </li>
                <li>
                  <a href="https://discord.gg/4QWgSz4hTC">
                    <img
                      src="site-assets/images/icons/discord.svg"
                      alt="discord"
                      class="svg"
                    />
                  </a>
                </li>
                <li>
                  <a href="https://github.com/fonoster">
                    <img
                      src="site-assets/images/icons/github.svg"
                      alt="github"
                      class="svg"
                    />
                  </a>
                </li>
                <li>
                  <a href="https://www.reddit.com/search/?q=fonoster">
                    <img
                      src="site-assets/images/icons/reddit.svg"
                      alt="reddit"
                      class="svg"
                    />
                  </a>
                </li>
              </ul>
            </li>
          </ul>

          <div class="copyright text-center">
            <div class="inner">
              <p class="accent">© 2025, Fonoster. All Rights Reserved.</p>
              <p class="small desc">Veteran Owned and Operated</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- footer-ends -->

    <script src="site-assets/js/jquery.min.js"></script>
    <script src="site-assets/js/popper.min.js"></script>
    <script src="site-assets/js/bootstrap.min.js"></script>
    <script src="site-assets/js/prism.js"></script>
    <script src="site-assets/js/swiper-bundle.min.js"></script>

    <!-- Custom JS File -->
    <script src="site-assets/js/setting.js"></script>
  </body>
</html>
